<template>
    <div id="homepod" v-if="imgData && productData">
        <div class="buy-at-head">
            <div class="buy-at-center980">
                <div class="buy-at-head-text">
                    <h2><router-link to="/family">{{productData.data.title}}</router-link></h2>
                </div>
            </div>
        </div>
        <div class="buy-at-adv">
            <div class="buy-at-center980">
                <div>购买 HomePod mini，Apple Music 免费试听六个月*。</div>
            </div>
        </div>
        <div class="buy-at-content">
            <div class="buy-at-center980">
                <div class="buy-at-infrom">
                    <div class="buy-at-infrom-img">
                        <video
                            muted
                            autoplay="autoplay"
                            aria-hidden="true"
                            width="100%"
                            height="100%"
                            v-if="now<0"
                        >
                            <source
                                :src="encodeImgUrl('homepod-mini-select.mp4')"
                                type="video/mp4"
                            />
                        </video>
                        <img v-else :src="productData.data.productSet[now].proImg">

                        <div class="buy-at-infrom-svg">
                            <ul class="">
                                <li class="">
                                    <div>
                                        <svg
                                            viewBox="0 0 35 35"
                                            role="img"
                                            aria-hidden="true"
                                            width="35px"
                                            height="35px"
                                        >
                                            <path
                                                fill="none"
                                                d="M0 0h35v35H0z"
                                            ></path>
                                            <path
                                                d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="">
                                        <span>免费送货</span>
                                    </p>
                                </li>

                                <li class="">
                                    <div class="">
                                        <svg
                                            enable-background="new 0 0 35 35"
                                            height="35"
                                            viewBox="0 0 35 35"
                                            width="35"
                                            role="img"
                                            aria-hidden="true"
                                        >
                                            <path
                                                d="m0 0h35v35h-35z"
                                                fill="none"
                                            ></path>
                                            <path
                                                d="m24.5 7c1.93 0 3.5 1.57 3.5 3.5v14c0 1.93-1.57 3.5-3.5 3.5h-14c-1.93 0-3.5-1.57-3.5-3.5v-14c0-1.93 1.57-3.5 3.5-3.5zm0-1h-14c-2.49 0-4.5 2.01-4.5 4.5v14c0 2.49 2.01 4.5 4.5 4.5h14c2.49 0 4.5-2.01 4.5-4.5v-14c0-2.49-2.01-4.5-4.5-4.5zm-11.25 18.2c.3 0 .63-.09 1-.26s.68-.44.95-.81.39-.86.39-1.47v-5.92c0-.14.02-.24.06-.29s.12-.08.26-.11l5.03-1.04c.27-.06.41.03.41.25l.04 3.97c0 .3-.14.49-.43.55l-.96.23c-1.28.28-1.92.89-1.92 1.84 0 .49.17.89.52 1.21.35.31.79.47 1.33.47.3 0 .64-.08 1-.24s.67-.42.93-.79c.26-.36.39-.86.39-1.47v-8.8c0-.31-.08-.52-.24-.63s-.41-.12-.77-.03l-5.95 1.22c-.44.1-.66.34-.66.71l.03 7.12c0 .29-.12.46-.37.51l-.99.2c-1.25.25-1.88.89-1.88 1.9 0 .48.17.88.51 1.2.35.32.79.48 1.32.48z"
                                                fill="#1d1d1f"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="">
                                        <span
                                            >购买 HomePod&nbsp;mini，
                                            Apple&nbsp;Music 免费试听 <br />
                                            六个月*</span
                                        >
                                    </p>
                                </li>

                                <li>
                                    <div>
                                        <svg
                                            viewBox="0 0 35 35"
                                            role="img"
                                            aria-hidden="true"
                                            width="35px"
                                            height="35px"
                                        >
                                            <path
                                                fill="none"
                                                d="M0 0h35v35H0z"
                                            ></path>
                                            <path
                                                d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                                                fill="none"
                                            ></path>
                                            <path
                                                d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                                            ></path>
                                            <path
                                                d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                                            ></path>
                                        </svg>
                                    </div>
                                    <p class="">
                                        <span>简单免费的退货服务</span>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="buyat-infrom-buttons">
                        <div class="buyat-infrom-btn-h1">
                            <h1>购买 {{productData.data.title}}</h1>
                        </div>
                        <div class="buyat-infrom-btn-color">
                            <h2>颜色</h2>
                            <div class="buyat-infrom-colorSet">
                                <div class="buyat-colorItem" 
                                v-for="(pro,i) in productData.data.productSet"
                                :key="i"
                                @click="selectColor(i)"
                                :class="{active:now==i}">
                                    <img :src="pro.colorImg" />
                                    <div>
                                        <span>{{pro.colorCh}}
                                          <p v-if="pro.isNewStyle">新款</p>
                                        </span>      
                                    </div>
                                </div>
                                <!-- <div class="buyat-colorItem">
                                    <img
                                        :src="encodeImgUrl('homepod-mini-finish-blue.png')"
                                    />
                                    <div>
                                        <span>
                                            蓝色
                                            <p>新款</p>
                                        </span>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                        <div class="buyat-infrom-payabout">
                            <div class="buyat-price-pay">
                                <div class="buyat-price">
                                    <h1 v-if="now<0">RMB {{productData.data.baseprice}} 起</h1>
                                    <h1 v-else>RMB {{productData.data.productSet[now].price}}</h1>
                                    <span class="buyat-price-other"
                                        >含增值税及其他法定税费：约 RMB
                                        87<sup>‡</sup>。</span
                                    >
                                </div>
                            </div>
                            <div class="buyat-infrom-buyBtn" :class="{btnop1:now>=0}">
                                <button id="buyat-addToBag" @click="addToShopBag">
                                    添加至购物袋
                                </button>
                            </div>
                            <div class="buyat-infrom-saveWapper">
                                <div class="buyat-save-item">
                                    <span>还拿不定主意？</span>
                                    <span
                                        >将此商品收藏到清单，方便回头再来挑选。</span
                                    >
                                </div>
                                <div class="buyat-save-iconSvg">
                                    <svg
                                        class="buyat-saveToWapper"
                                        width="35"
                                        height="35"
                                        role="img"
                                        aria-hidden="true"
                                    >
                                        <path
                                            fill="none"
                                            d="M0 0h35v35H0z"
                                        ></path>
                                        <path
                                            fill="#06c"
                                            d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
                                        ></path>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="buyat-infrom-otherText">
                            <p style="color: black">
                                <b>想在每间房都放一个，让全家都有音乐萦绕？</b>
                            </p>
                            <p style="padding-bottom: 8px">
                                你可以在购物袋中更改商品数量。
                            </p>
                            <p>
                                需要使用运行最新版本软件的 HomePod
                                mini，以及运行最新版本 iOS 的 iPhone SE、iPhone
                                6s 或更新机型、iPod touch
                                (第七代)，或者运行最新版本 iPadOS 的 iPad
                                Pro、iPad (第五代或更新机型)、iPad Air 2
                                或更新机型、iPad mini 4 或更新机型。
                            </p>
                        </div>

                        <div class="buyat-infrom-getHelp">
                            <p>
                                <b>获得购买帮助，</b>立即在线交流 或致电
                                400-666-8800。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buy-at-row-gallery">
            <div class="buy-at-center980">
                <ul class="buyat-rgallery-imglist">
                    <li>
                        <img :src="encodeImgUrl('homepod-mini-202110-gallery-1.jfif')" />
                    </li>
                    <li>
                        <img :src="encodeImgUrl('homepod-mini-202110-gallery-2.jfif')" />
                    </li>
                    <li>
                        <img :src="encodeImgUrl('homepod-mini-202110-gallery-3.jfif')" />
                    </li>
                    <li>
                        <img :src="encodeImgUrl('homepod-mini-202110-gallery-4.jfif')" />
                    </li>
                    <li>
                        <img :src="encodeImgUrl('homepod-mini-202110-gallery-5.jfif')" />
                    </li>
                </ul>
            </div>
        </div>
        <div class="buy-at-clom-gallery">
            <div class="buy-at-center980">
                <div class="buyat-cgallery-head">
                    <h2>细看 HomePod mini。</h2>
                </div>
                <div class="buyat-cgallery-imglist">
                    <div class="buyat-cgallery-item">
                        <div class="buyat-cgallery-item-cont">
                            <img
                                width="480px"
                                height="440px"
                                :src="encodeImgUrl('homepod-mini-big-sound-202110.png')"
                            />
                            <p>
                                底气十足的
                                <span style="color: #1d1d1f">360 度音频</span
                                >。多放几个 HomePod mini
                                在家中各处，可体验丰富的多房间音频¹，以及广播等功能。
                            </p>
                        </div>
                    </div>

                    <div class="buyat-cgallery-item">
                        <div class="buyat-cgallery-item-cont">
                            <img
                                width="480px"
                                height="198px"
                                :src="encodeImgUrl('homepod-mini-intelligent-assistant-202110.jfif')"
                            />
                            <p>
                                Siri 是 HomePod mini 上的<span
                                    style="color: #1d1d1f"
                                    >智能助理</span
                                >。你只要动动嘴，就能查日历、听天气、设闹钟和做日常。
                            </p>
                        </div>
                    </div>

                    <div class="buyat-cgallery-item">
                        <div class="buyat-cgallery-item-cont">
                            <img
                                width="480px"
                                height="440px"
                                :src="encodeImgUrl('homepod-mini-smart-home-202110_GEO_CN.png')"
                            />
                            <p>
                                <span style="color: #1d1d1f"
                                    >操控你的智能家居</span
                                >配件。有了 HomePod mini，你的话就是 指令。
                            </p>
                        </div>
                    </div>

                    <div class="buyat-cgallery-item">
                        <div class="buyat-cgallery-item-cont">
                            <img
                                width="480px"
                                height="440px"
                                :src="encodeImgUrl('homepod-mini-privacy-202110.png')"
                            />
                            <p>
                                隐私很重要，自己家的隐私当然更重要。HomePod mini
                                可确保你的数据<span style="color: #1d1d1f"
                                    >私密又安全</span
                                >。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="buy-at-bottom" :style="`backgroundImage: url(${encodeImgUrl(
                'homepod-mini-202203-apple-music_GEO_CN.jfif'
              )}`">
            <div class="buy-at-center980">
                <div class="buy-at-bottom-text">
                    <img :src="encodeImgUrl('airpods-202110-applemusic-logo.jfif')" />
                    <p>
                        购买 HomePod mini，<br />Apple Music 免费试听<br />六个月<sup>*</sup>。
                    </p>
                </div>
            </div>
        </div>
        <msg-mask ref="msgMaskbtn" />
    </div>
</template>

<script>
import axios from 'axios';
import MsgMask from '@/components/MsgMask.vue';
export default {
    components: { MsgMask },
  data() {
    return {
      imgData: null,
      productData:null,
      userBagData:null,
      now:-1,
      proTitle:'',
      proPrice:0,
      proImg:'',
    }
  },
    computed: {
        encodeImgUrl() {
            return function (imgName) {
                return this.imgBaseUrl + this.imgData[imgName];
            };
        },
    },
    methods: {
        getImgData() {
            let url = "http://localhost:3000/HYLImg";
            axios.get(url)
            .then(res=>{
              this.imgData = res.data
            })
        },
        getProductData(){
          let url = `http://localhost:3000/product/10`;
          axios.get(url).then(res=>{
            this.productData = res.data
            console.log(res.data)
          })
        },
        selectColor(i){
          let nowColor = this.productData.data.productSet[i];
          this.now = i;
          //大标题 + 颜色标题
          this.proTitle = this.productData.data.title+nowColor.colorCh;
          this.proPrice = nowColor.price;
          this.proImg = nowColor.proImg;
        },
        addToShopBag() {
            let user = sessionStorage.getItem("user");
            //判断是否选择了商品
            if (this.now < 0) {
                return;
            }
            // 判断是否登录过，否则就直接返回到登录页面
            if (user == "" || !user) {
                this.$refs.msgMaskbtn.setInformation({
                    title: "未登录",
                    // btnTitle:'去登陆',
                    callback() {
                        this.$router.push("/login");
                    },
                });
                this.$refs.msgMaskbtn.showbtnMask();
                return;
            }

            //解析json字符串为js对象
            user = JSON.parse(user);

            //用户信息已经拿到了,接下来是拿到用户购物袋的信息
            let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
            axios.get(userurl).then((res) => {
                this.userBagData = res.data;

                let seemProduct = this.checkProductNum(this.proTitle);

                //商品在数据库里的数量如果不等于空
                //就代表着有重复着的数据
                if (seemProduct != null) {
                    let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
                    seemProduct.num += 1;
                    // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
                    // 另外需要将对象里的num数量+1
                    axios.put(url2, seemProduct).then((res) => {
                        this.$refs.msgMaskbtn.setInformation({
                            title: "添加商品成功",
                        });
                        this.$refs.msgMaskbtn.showbtnMask();
                    });
                } 
                else {
                    //这里是没找到重复商品的操作
                    //正常的添加操作 post
                    let url = `http://localhost:3000/user/${user.id}/shopBagList`;
                    axios
                        .post(url, {
                            title: this.proTitle,
                            price: this.proPrice,
                            img: this.proImg,
                            num: 1, //默认的参数 已添加为1
                            //post的参数是一个对象，里面只接受四个参数
                        })
                        .then((res) => {
                            this.$refs.msgMaskbtn.setInformation({
                                title: "添加商品成功",
                            });
                            this.$refs.msgMaskbtn.showbtnMask();
                        });
                }
            });
        },
        checkProductNum(proTitle) {
            //检查用户列表下的商品数量
            //返回值 重复的商品对象
            //参数，需要进行检查的商品标题
            for (const e of this.userBagData) {
                if (e.title == proTitle) {
                    return e;
                }
            }
            return null;
        },

    },
    mounted() {
        this.getImgData();
        this.getProductData();
    },
};
</script>

<style lang="less" scoped>
#homepod {
    width: 100%;
    height: 100%;
}
</style>
<style scoped src="../assets/css/homepod-mini.css"></style>
